<template>
    
  <div class="outer">
        <el-tabs id="tab" v-model="SC_tabsModules" type="card">
            <el-tab-pane label="个人工资图表" name="first">
                <el-form inline>
          <div class="search-left">
                        <el-form-item>
                            <el-date-picker v-model="beginTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" :picker-options="pickerOptions0" @change="changeDate"></el-date-picker>
                          </el-form-item
            >
                        <el-form-item>
                            <el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" :picker-options="pickerOptions1" @change="changeDate"></el-date-picker>
                          </el-form-item
            >
                        <el-form-item>
                            <el-select v-model="selectValue2" placeholder="个人工资表格" @change="GZBB_change($event)">
                                <el-option v-for="item in DivForm" :key="item.value" :label="item.label" :value="item.value"></el-option>                </el-select
              >
                          </el-form-item
            >
                        <el-form-item>
                            <el-button @click="queryOne()">查询</el-button>               <!-- type="primary" -->
                <el-button class="buttonExport" @click=" QualityHandleChangeOne()">导出</el-button>
                          </el-form-item
            >
                      
          </div>
                  </el-form
        >

                <!-- <template slot="operation" style="height:0;min-height:0;"></template> -->
                
        <div v-show="divOne">
                    <el-table border stripe :data="reportSalaryCompanyDateArray">
                        <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>             <el-table-column
              prop="workerName"
              label="员工姓名"
              align="center"
              width="160"
            ></el-table-column>
                        <el-table-column prop="workHour" label="机车产品工时" align="center" width="200"></el-table-column>             <el-table-column
              prop="workHourPrice"
              label="机车产品价钱"
              align="center"
              width="200"
            ></el-table-column>
                        <el-table-column prop="dayWork" label="日工天数" align="center" width="180"></el-table-column>             <el-table-column
              prop="dayWorkPrice"
              label="日工单价"
              align="center"
              width="180"
            ></el-table-column>
                        <el-table-column prop="dayWorkSalary" label="日工价钱" align="center" width="180"></el-table-column>             <el-table-column
              prop="totalPrice"
              label="总价钱"
              align="center"
              min-width="160"
            ></el-table-column>
                        <el-table-column prop="aa" width="140"></el-table-column>           </el-table
          >
                  
        </div>

                
        <div id="SC_chart1" class="SC_echartFrame" v-show="divTwo"></div>
              </el-tab-pane
      >

            <el-tab-pane label="个人工时工资图表" name="third">
                
        <div id="selet2" class="SC_selectFrame">
                    <el-select v-model="selectValue" placeholder="请选择人物" @change="SC_selectOne($event)" :style="{ float: 'left' }">
                        <el-option v-for="item in gzbb_companyName" :key="item.value" :label="item.lable" :value="item.value"></el-option>           </el-select
          >
                  
        </div>
                
        <div id="SC_chart2" class="SC_echartFrame"></div>
              </el-tab-pane
      >
          </el-tabs
    >
      
  </div>
</template>

<script >
import * as echarts from 'echarts'
import DatePicker from 'element-ui'
import { selectSalaryCompany } from '@/api/bi'
export default {
  data() {
    return {
      elSelectData: [],
      divOne: true,
      divTwo: false,
      selectValue2: '',
      searchParam: '',
      beginTime: '',
      endTime: '',
      chooseId: null,
      response: '',
      selectValue: '',
      SC_tabsModules: 'first',
      SC_tabs: 'first',
      SC_datepickerValue: '',
      SC_yearOne: '',
      SC_monthOne: '',
      reportSalaryCompanyDateArray: [],
      pickerOptions0: '',
      pickerOptions1: '',
      gzbb_companyName: [],
      DivForm: [
        { label: '个人工资表格', value: '0' },
        { label: '个人工资图表', value: '1' }
      ] /** 预构建个人工资报表框架 */,
      SC_getSetOptionOne: {
        title: {
          text: '个人工资报表',
          left: 'center'
        },
        tooltip: {}, //鼠标悬浮在图例时显示数字
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            saveAsImage: {}
          }
        },
        legend: {
          left: 10
        },
        xAxis: {
          data: [],
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            name: '总工时/小时',
            type: 'value',
            scale: true,
          }
        ], //自己设置颜色
        series: [
          {
            name: '总工时',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f3715c' },
                { offset: 0.5, color: '#aa2116' },
                { offset: 1, color: '#7a1723' }
              ]),
              barBorderRadius: 5
            },
            data: [],
            yAxisIndex: 0
          }
        ]
      } /** 预构建啊个人工时工资报表框架 */,
      SC_getSetOptionTwo: {
        title: {
          left: 'center',
          text: '个人工时工资报表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          left: 10
        },
        xAxis: {
          data: [],
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            name: '工时总价/元',
            type: 'value',
            scale: true
          },
          {
            name: '总工时/小时',
            type: 'value',
            scale: true
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: '日工价钱',
            type: 'bar',
            stack: 'total',
            data: [],
            itemStyle: {
              barBorderRadius: 5
            },
            yAxisIndex: 0
          },
          {
            name: '机车产品价钱',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              barBorderRadius: 5
            },
            data: [],
            yAxisIndex: 0
          },
          {
            name: '总工时',
            type: 'line',
            symbolSize: 8,
            yAxisIndex: 1,
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.obtainSelect()
    this.drawBar()
  },
  methods: {
    /** 限制两个日历选择器，使开始时间小于结束时间，并且所选时间早于当前时间*/
    changeDate() {
      //因为date1和date2格式为 年-月-日， 所以这里先把date1和date2转换为时间戳再进行比较
      let date1 = new Date(this.beginTime).getTime()
      let date2 = new Date(this.endTime).getTime()
      this.pickerOptions0 = {
        disabledDate: time => {
          if (date2 != '') {
            return time.getTime() > Date.now() || time.getTime() > date2
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
      this.pickerOptions1 = {
        disabledDate: time => {
          return time.getTime() < date1 || time.getTime() > Date.now()
        }
      }
    },
    GZBB_change(e) {
      if (e == '0') {
        this.divOne = true
        this.divTwo = false
      }
      if (e == '1') {
        this.divOne = false
        this.divTwo = true
      }
    } /*** 查询按钮 */,
   async queryOne() {
     let res = await selectSalaryCompany({ beginTime: this.beginTime, endTime: this.endTime })
          this.reportSalaryCompanyDateArray = res.data.tableDate
          var gzbbDataset = res.data.totalWorkHour
          this.SC_chart1.setOption({
            series: [
              {
                name: 'bar',
                data: []
              }
            ]
          })
          this.SC_chart1.setOption({
            series: [
              {
                name: '总工时',
                data: gzbbDataset
              }
            ]
          })

    } /** 获取下拉列表数据 */,

    async obtainSelect() {
      // this.response = await selectSalaryCompany()
      // this.gzbb_companyName = this.response.data.nameList
      let res = await selectSalaryCompany()
      this.gzbb_companyName = res.data.nameList
       let selectResult = res.data.nameList
          for (let i = 1; i < selectResult.length; i++) {
            let obj = {}
            obj.label = selectResult[i].userName + selectResult[i].jobNumber
            obj.value = selectResult[i].id
            this.elSelectData.push(obj)
          }
          console.log(this.elSelectData)
            this.SC_chart1 = echarts.init(document.getElementById('SC_chart1'))
      this.SC_chart2 = echarts.init(document.getElementById('SC_chart2'))
      this.SC_chart1.setOption(this.SC_getSetOptionOne)
      this.SC_chart2.setOption(this.SC_getSetOptionTwo)
       var SC_xdataset = res.data.echartMap.nameX
          this.SC_chart1.setOption({
            xAxis: {
              data: SC_xdataset
            }
          })

    } /** 在画布上画上框架 */,
    drawBar() {
      // this.$http.get('/SalaryCompany').then(
      //   res => {
      //     let selectResult = res.data.nameList
      //     for (let i = 1; i < selectResult.length; i++) {
      //       let obj = {}
      //       obj.label = selectResult[i].userName + selectResult[i].jobNumber
      //       obj.value = selectResult[i].id
      //       this.elSelectData.push(obj)
      //     }
      //     console.log(this.elSelectData)
      //   },
      //   error => {
      //     console.log('获取失败' + error)
      //   }
      // )

      // this.SC_chart1 = echarts.init(document.getElementById('SC_chart1'))
      // this.SC_chart2 = echarts.init(document.getElementById('SC_chart2'))
      // this.SC_chart1.setOption(this.SC_getSetOptionOne)
      // this.SC_chart2.setOption(this.SC_getSetOptionTwo)
      // this.$http.get('/SalaryCompany').then(
      //   res => {
      //     var SC_xdataset = res.data.echartMap.nameX
      //     this.SC_chart1.setOption({
      //       xAxis: {
      //         data: SC_xdataset
      //       }
      //     })
      //   },
      //   error => {
      //     console.log('图2失败' + error)
      //   }
      // )
    },

   async SC_selectOne(e) {
      this.chooseId = e
       let res = await selectSalaryCompany({chooseId:e})
      var GZBBdataset = res.data.person_map
      this.SC_chart2.setOption({
        xAxis: {
          data: []
        },
        series: [
          {
            name: '日工价钱',
            data: []
          },
          {
            name: '工时总价',
            data: []
          },
          {
            name: '总工时',
            data: []
          }
        ]
      })
      this.SC_chart2.setOption({
        xAxis: {
          data: GZBBdataset.gzbb_time
        },
        series: [
          {
            name: '日工价钱',
            data: GZBBdataset.dayPrice
          },
          {
            name: '工时总价',
            data: GZBBdataset.sumHourPrice
          },
          {
            name: '总工时',
            data: GZBBdataset.sumHour
          }
        ]
      })
    }
  }
}
</script>
<style >
.SC_echartFrame {
  float: left;
  width: 1480px;
  height: 700px;
  border: 1px solid #ccc;
}
.SC_selectFrame {
  margin: 20 px;
  float: left;
  width: 1480px;
  height: 54px;
  border: 1px solid #fcfcfc;
}
.SC_selectDiv {
  float: left;
  width: 180px;
  height: 54px;
}
.outer {
  width: 100%;
  padding: 0px 0px 10px 20px;
  margin-top: 60px;
}
#tab .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 3px solid #004098 !important;
  background-color: #fafafa !important;
  color: #004098 !important;
}
#tab.el-tabs {
  height: calc(100vh - 130px);
  overflow: hidden;
}

#tab .el-tabs__content {
  max-height: calc(100vh - 189px);
  overflow-y: auto;
}
.buttonExport{
  color:white;
  background-color: #004098 !important;
}
</style>